@charset "utf-8";
@import "reset";
@import "_commonality";

.wrap{
    main{
        .flash{
            background-color: #8bc01f;
            .flash-left{
                padding-top: 65px;
                .flash-left-title{
                    .title{
                        display: flex;
                        margin-bottom: 15px;
                        .one{
                            width: 55px;
                            height: 55px;
                            text-align: center;
                            line-height: 55px;
                            background-color: #fff;
                            color: #8bc01f;
                            font-size: 48px;
                            font-weight: bold;
                            margin-right: 12px;
                        }

                        p{
                            font-size: 48px;
                            color: #fff;
                            line-height: 55px;
                        }
                    }

                    span{
                        display: inline-block;
                        font-size: 24px;
                        color: #fff;
                        margin-left: 12px;
                    }
                }

                .flash-left-text{
                    margin-top: 65px;
                    margin-left: 12px;
                    span{
                        font-size: 14px;
                        line-height: 30px;
                        color: #fff;
                    }

                    p{
                        font-size: 14px;
                        line-height: 30px;
                        color: #fff;
                        margin: 15px 0;
                    }
                }

                button{
                    width: 100px;
                    height: 34px;
                    text-align: center;
                    line-height: 34px;
                    background-color: #e8f2d2;
                    color: #8bc01f;
                    border: none;
                    margin-top: 30px;
                }
            }

            .flash-right{
                padding-top: 60px;
                padding-bottom: 60px;
                // padding-left: 100px;
                .imges{
                    width: 100%;
                }
            }
        }

        .player{
            background-color: #3393df;
            .player-left{
                padding-top: 75px;
                .title{
                    display: flex;
                    margin-bottom: 15px;
                    .one{
                        width: 44px;
                        height: 44px;
                        text-align: center;
                        line-height: 44px;
                        background-color: #fff;
                        color: #3393df;
                        font-size: 48px;
                        font-weight: bold;
                        margin-right: 12px;
                    }

                    p{
                        font-size: 48px;
                        color: #fff;
                        line-height: 44px;
                    }
                }

                .player-left-img{
                    margin-top: 30px;
                }
            }

            .player-center{
                padding-top: 163px;
                .player-center-texttop{
                    color: #fff;
                    p{
                        font-size: 24px;
                        margin-bottom: 15px;
                    }

                    span{
                        font-size: 14px;
                        line-height: 30px;
                        letter-spacing: 3px;
                    }
                }

                .player-center-textbottom{
                    margin-top: 33px;
                    color: #fff;
                    p{
                        font-size: 24px;
                        margin-bottom: 15px;
                    }

                    span{
                        font-size: 14px;
                        line-height: 30px;
                        letter-spacing: 3px;
                    }
                }
            }

            .player-right{
                padding-top: 288px;
                padding-bottom: 60px;
            }
        }

        .air-open{
            padding-bottom: 84px;
            .air-left{
                .air-title{
                    margin-top: 90px;
                    .title{
                        display: flex;
                        margin-bottom: 24px;
                        align-items: center;
                        .one{
                            width: 40px;
                            height: 40px;
                            text-align: center;
                            line-height: 40px;
                            background-color: #3393df;
                            color: #fff;
                            font-size: 36px;
                            font-weight: bold;
                            margin-right: 12px;
                        }

                        p{
                            font-size: 42px;
                            color: #3393df;
                        }
                    }

                    span{
                        font-size: 18px;
                        color: #5d5d5d;
                    }
                }

                .air-main{

                    .box{
                        margin-top: 35px;
                        p{
                            font-size: 18px;
                            color: #3393df;
                            margin-bottom: 20px;
                        }

                        span{
                            display: inline-block;
                            font-size: 14px;
                            color: #5d5d5d;
                            text-indent: 2em;
                        }
                    }
                }

                .air-img{
                    width: 140px;
                    margin: 0 auto;
                    margin-top: 40px;
                }
            }

            .open-right{
                .open-title{
                    margin-top: 90px;
                    .title{
                        display: flex;
                        margin-bottom: 24px;
                        align-items: center;
                        .one{
                            width: 40px;
                            height: 40px;
                            text-align: center;
                            line-height: 40px;
                            background-color: #3393df;
                            color: #fff;
                            font-size: 36px;
                            font-weight: bold;
                            margin-right: 12px;
                        }

                        p{
                            font-size: 42px;
                            color: #3393df;
                        }
                    }

                    span{
                        font-size: 18px;
                        color: #5d5d5d;
                    }
                }

                .open-main{

                    .box{
                        margin-top: 35px;
                        p{
                            font-size: 18px;
                            color: #3393df;
                            margin-bottom: 20px;
                        }

                        span{
                            display: inline-block;
                            font-size: 14px;
                            color: #5d5d5d;
                            text-indent: 2em;
                        }

                        &:nth-child(2){
                            margin-top: 53px;
                        }
                    }


                }

                .open-img{
                    width: 140px;
                    margin: 0 auto;
                    margin-top: 40px;
                }
            }
        }
        
        .store-publish{
            padding-bottom: 84px;
            .store-left{
                .store-title{
                    .title{
                        display: flex;
                        margin-bottom: 24px;
                        align-items: center;
                        .one{
                            width: 40px;
                            height: 40px;
                            text-align: center;
                            line-height: 40px;
                            background-color: #3393df;
                            color: #fff;
                            font-size: 36px;
                            font-weight: bold;
                            margin-right: 12px;
                        }

                        p{
                            font-size: 42px;
                            color: #3393df;
                        }
                    }

                    span{
                        font-size: 18px;
                        color: #5d5d5d;
                    }
                }

                .store-main{

                    .box{
                        margin-top: 35px;
                        p{
                            font-size: 18px;
                            color: #3393df;
                            margin-bottom: 20px;
                        }

                        span{
                            display: inline-block;
                            font-size: 14px;
                            color: #5d5d5d;
                            text-indent: 2em;
                        }
                    }
                }

                .store-img{
                    width: 140px;
                    margin: 0 auto;
                    margin-top: 47px;
                }
            }

            .publish-right{
                .publish-title{
                    .title{
                        display: flex;
                        margin-bottom: 24px;
                        align-items: center;
                        .one{
                            width: 40px;
                            height: 40px;
                            text-align: center;
                            line-height: 40px;
                            background-color: #3393df;
                            color: #fff;
                            font-size: 36px;
                            font-weight: bold;
                            margin-right: 12px;
                        }

                        p{
                            font-size: 42px;
                            color: #3393df;
                        }
                    }

                    span{
                        font-size: 18px;
                        color: #5d5d5d;
                    }
                }

                .publish-main{

                    .box{
                        margin-top: 35px;
                        p{
                            font-size: 18px;
                            color: #3393df;
                            margin-bottom: 20px;
                        }

                        span{
                            display: inline-block;
                            font-size: 14px;
                            color: #5d5d5d;
                            text-indent: 2em;
                        }
                    }


                }

                .publish-img{
                    width: 140px;
                    margin: 0 auto;
                    margin-top: 47px;
                }
            }
        }
    }
}

@media all and (max-width:991px) {
    .wrap{
        header{
            .navbar{
                .navbar-collapse{
                    .navbar-nav{
                        li{
                            a{
                                padding: 15px 4px;
                            }
                        }
                    }
                }
            }
        }

        main{
            .flash{
                .container{
                    .row{
                        .flash-left{
                            button{
                                margin-bottom: 20px;
                            }
                        }
                        .flash-right{
                            display: none;
                        }
                    }
                }
            }

            .player{
                .player-left{
                    .player-left-img{
                        display: none;
                    }
                }

                .player-center{
                    padding-top: 40px;
                    padding-bottom: 30px;
                }

                .player-right{
                    display: none;
                }
            }

            .air-open{
                padding-bottom: 50px;
                .air-left{
                    .air-title{
                        margin-top: 50px;
                    }

                    .air-img{
                        display: none;
                    }
                }

                .open-right{
                    .open-title{
                        margin-top: 50px;
                    }

                    .open-img{
                        display: none;
                    }
                }
            }

            .store-publish{
                padding-bottom: 50px;
                .store-left{

                    .store-img{
                        display: none;
                    }
                }

                .publish-right{
                    .publish-title{
                        margin-top: 50px;
                    }

                    .publish-img{
                        display: none;
                    }
                }
            }
            
        }
    }
    
}

@media all and (max-width:767px) {
    .wrap{
        footer{
            .row{
                .container-text-top{
                    ul{
                        display: flex;
                        justify-content: space-around;
                    }
                }
                .container-logo{
                    display: flex;
                    justify-content: space-around;
                }
            }
            
        }
    }
    
}